<template>
  <MapHtml
    v-bind="$attrs"
    ref="html"
    positioning="bottom-center"
    :class="classes"
    :style="{'width': width}"
    v-clickoutside="handleClickOutside"
  >
    <a-icon class="map-popup__close" type="close" v-if="closable" @click="hide"></a-icon>
    <div v-if="title" class="map-popup__title">
      <slot name="title">
        <a-icon v-if="icon" v-bind="iconProps"></a-icon>
        {{ title }}
      </slot>
    </div>·
    <div class="map-popup__body" :style="{'height': height}">
      <slot></slot>
    </div>
  </MapHtml>
</template>

<script>
  /**
   * 地图弹窗组件
   */
  import MapHtml from '../html'
  import clickoutside from 'element-ui/lib/utils/clickoutside'

  /**
   * 属性参数
   * @member props
   * @property {string} [width] 弹窗主体宽度
   * @property {string} [height] 弹窗主体高度
   * @property {string} [title] 弹窗标题
   * @property {string|object} [icon] 弹窗icon
   * @property {boolean} [closable] 是否可关闭
   * @property {boolean} [closeOnClick] 是否点击外部关闭
   * @property {string} [theme] 样式
   * @property {boolean} [showArrow] 是否显示箭头
   */

  /**
   * slots 插槽
   * @member slot
   * @property {string} default 默认插槽，定义主体内容
   * @property {string} title 头部标题的插槽
   */
  export default {
    name: 'MapPopup',
    directives: {
      clickoutside
    },
    components: {
      MapHtml
    },
    props: {
      width: {
        type: String,
        default: null
      },
      height: {
        type: String,
        default: null
      },
      title: {
        type: String,
        default: null
      },
      icon: {
        type: [String, Object],
        default: null
      },
      closable: {
        type: Boolean,
        default: true
      },
      closeOnClick: Boolean,
      theme: {
        type: String,
        default: 'light',
        validator () {
          return ['dark', 'light']
        }
      },
      showArrow: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      iconProps () {
        if (!this.icon) return null
        return typeof this.icon === 'object' ? { ...this.icon } : { name: this.icon }
      },
      classes () {
        return ['map-popup', `is-${this.theme}`, `${this.showArrow ? 'arrow' : ''}`]
      }
    },
    methods: {
      show (position) {
        const coordinate = position || this.$refs.html.position
        this.$refs.html.setPosition(coordinate)
        this.$emit('show', coordinate)
      },
      hide () {
        this.$refs.html.setPosition(null)
        this.$emit('hide')
      },
      handleClickOutside () {
        if (this.closeOnClick) {
          this.hide()
        }
      }
    }
  }
</script>

<style lang="less">
.map-popup {
  position: relative;
  min-width: 120px;
  height: 100%;
  font-size: 14px;
  border-radius: 2px;
  color: @text-color;
  background: @component-background;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
  &.arrow::after, &.arrow::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    font-size: 0;
    border: 8px solid transparent;
    border-top: 12px solid @component-background;
    content: '';
    transform: translate(-50%, 100%);
  }
  &.arrow::before {
    border: 9px solid transparent;
    border-top: 13px solid rgba(50, 50, 50, 0.3);
  }
  &__title {
    padding: 0 10px;
    height: 36px;
    border-bottom: 1px solid @border-color-base;
    border-radius: 2px 2px 0 0;
    color: @text-color;
    background: @background-color-light;
    line-height: 36px;
  }
  &__body {
    padding: 5px 10px 10px;
  }
  &__close {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-size: contain;
    opacity: 0.7;
    cursor: pointer;
    line-height: 38px;
    &:hover {
      opacity: 1;
    }
  }
  &.is-dark {
    background: rgba(30,30,30,0.95);
    .map-popup__close {
      color: @heading-color-dark;
    }
    .map-popup__title {
      border: 1px solid rgb(62, 65, 65);
      color: @heading-color-dark;
      background: #333333;
    }
    .map-popup__body {
      color: @heading-color-dark;
    }
    &.arrow::after, &.errow::before {
      border-top: 12px solid rgba(0, 0, 0, 0.7);
    }
    &.arrow::before {
      border-top: 13px solid rgba(50, 50, 50, 0.3);
    }
  }

}
</style>
